<style lang="less" scoped>
.con_left {
  height: 100%;

  margin-right: 10px;
  padding: 25px;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;

  //   头部
  .leftcon_top {
    height: 32%;


  }

  //   中间
  .leftcon_middle {
    height: 32%;

    .middle1 {
      flex: 1;
      margin-right: 20px;
    }

    .middle2 {
      flex: 1;
    }
  }

  //   底部
  .leftcon_btm {
    height: 32%;

    .progress-group {
      margin-top: 20px;
      padding: 0 20px;
    }
  }

  .echarts {
    width: 100%;
    height: 90%;
  }

  .maxnums {
    height: 22vh;
    padding: 0 20px;
    margin-top: 20px;

    .maxnums-item {
      width: 100%;
      background: rgba(31, 73, 135, 0.25);
      padding: 15px;
      position: relative;
      margin-bottom: 20px;

      .square {
        position: absolute;
        width: 6px;
        height: 6px;
        background: rgba(31, 73, 135, 0.25);
      }

      .square1 {
        top: -3px;
        left: -3px;
      }

      .square2 {
        top: -3px;
        right: -3px;
      }

      .square3 {
        bottom: -3px;
        left: -3px;
      }

      .square4 {
        bottom: -3px;
        right: -3px;
      }

      .maxnums-item-left {
        img {
          width: 80px;
          height: 50px;
        }
      }

      .maxnums-item-right {
        font-size: 16px;
        font-family: Microsoft YaHei;
        font-weight: bold;
        color: #21D3FF;

        span {
          display: block;
          color: #21D3FF;
          font-family: Microsoft YaHei;

          &:last-child {
            font-size: 14px;
            margin-top: 5px;
          }
        }
      }
    }
  }
}
</style>
<template>
  <div class="con_left">
    <div class="leftcon_top" style="padding:0 20px;">

    </div>
    <div class="leftcon_middle">
      <checked-title :title="titleCallPolice" />
      <div class="maxnums">
        <div class="maxnums-item flex flex-between align-items-center" v-for="(item, index) in maxnums" :key="index">
          <span class="square square1"></span>
          <span class="square square2"></span>
          <span class="square square3"></span>
          <span class="square square4"></span>
          <div class="maxnums-item-right"><span>{{ item.texts }}</span><span>{{ item.times }}</span></div>
          <div class="maxnums-item-left"><img :src="item.imgs" alt="" srcset=""></div>
        </div>
      </div>
    </div>
    <div class="leftcon_btm">
      <checked-title :title="titletroubleshoot" />
      <div class="progress-group">
        <el-progress :stroke-width="15" :percentage="70" :show-text="false"></el-progress>
      </div>
    </div>
  </div>
</template>

<script>


import highcharts from "highcharts";
import highcharts3d from "highcharts/highcharts-3d";
highcharts3d(highcharts);
import https from '@request/https'
export default {
  data() {
    return {
      titleCallPolice: "报警信息",
      titletroubleshoot: "违规排查",
      maxnums: [
        { texts: '发生地点:北园街寇庄西路', times: '2020-09-23 11:12:03', imgs: require('../../assets/images/videoimg.png') },
        { texts: '发生地点:龙城大街平阳路西南角', times: '2020-09-23 11:12:03', imgs: require('../../assets/images/videoimg.png') },
        { texts: '发生地点:许坦西街党校路口南', times: '2020-09-23 11:12:03', imgs: require('../../assets/images/videoimg.png') },
      ],
    };
  },
  created() {

  },
  watch: {

  },
  mounted() {

  },
  methods: {

  },
};
</script>